<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="线上点单支付页" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="onlinepay">
			<view class="onlinepay-bgbanner"></view>
			<view class="onlinepay-content">
				<view class="onlinepay-content-address">
					<view class="onlinepay-content-address-content">
						<image :src="commonImg('weizhi.png')" class="onlinepay-content-address-content-img"></image>
						<text class="onlinepay-content-address-content-txt">配送地址</text>
					</view>
					<view class="onlinepay-content-address-line"></view>
					<view @click="onClickGotoAddressPage" class="onlinepay-content-address-add">
						<image :src="commonImg('add.png')" class="onlinepay-content-address-add-mark"></image>
						<text class="onlinepay-content-address-add-txt">点击新增地址</text>
					</view>
				</view>
				<view class="onlinepay-content-list">
					<view class="onlinepay-content-list-name">
						<text class="onlinepay-content-list-name-txt">闽南猪脚饭（高新店）</text>
						<view class="onlinepay-content-list-name-zk">
							<view class="onlinepay-content-list-name-zk-left">
								<text class="onlinepay-content-list-name-zk-left-txt">折</text>
								<text class="onlinepay-content-list-name-zk-left-content">PLUS会员78折</text>
							</view>
							<view class="onlinepay-content-list-name-zk-right">
								<text class="onlinepay-content-list-name-zk-right-txt">折</text>
								<text class="onlinepay-content-list-name-zk-right-content">会员78折</text>
							</view>
						</view>
						<view class="onlinepay-content-list-name-line"></view>
					</view>
					<view class="onlinepay-content-list-wrap">
						<view class="onlinepay-content-list-wrap-item">
							<image :src="commonImg('demo.jpg')" class="onlinepay-content-list-wrap-item-img"></image>
							<view class="onlinepay-content-list-wrap-item-info">
								<text class="onlinepay-content-list-wrap-item-info-name">猪脚饭（大份）</text>
								<text class="onlinepay-content-list-wrap-item-info-num">数量：1</text>
							</view>
							<view class="onlinepay-content-list-wrap-item-price">
								<text class="onlinepay-content-list-wrap-item-price-mark">￥</text>
								<text class="onlinepay-content-list-wrap-item-price-num">30</text>
							</view>
						</view>
						<view class="onlinepay-content-list-wrap-item">
							<image :src="commonImg('demo.jpg')" class="onlinepay-content-list-wrap-item-img"></image>
							<view class="onlinepay-content-list-wrap-item-info">
								<text class="onlinepay-content-list-wrap-item-info-name">猪脚饭（大份）</text>
								<text class="onlinepay-content-list-wrap-item-info-num">数量：1</text>
							</view>
							<view class="onlinepay-content-list-wrap-item-price">
								<text class="onlinepay-content-list-wrap-item-price-mark">￥</text>
								<text class="onlinepay-content-list-wrap-item-price-num">30</text>
							</view>
						</view>
					</view>
					<view class="onlinepay-content-list-line">
						<view class="onlinepay-content-list-line-wrap"></view>
					</view>
					<view class="onlinepay-content-list-js">
						<view class="onlinepay-content-list-js-wrap">
							<text class="onlinepay-content-list-js-wrap-zk">折扣：8.7折</text>
							<view class="onlinepay-content-list-js-wrap-price">
								<view class="onlinepay-content-list-js-wrap-price-left">配送费用<text class="onlinepay-content-list-js-wrap-price-left-red">￥2.00</text></view>
								<view class="onlinepay-content-list-js-wrap-price-left">包装费<text class="onlinepay-content-list-js-wrap-price-left-red">￥2.00</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="onlinepay-content-symd">
					<image :src="commonImg('select.png')" class="onlinepay-content-symd-select"></image>
					<text class="onlinepay-content-symd-txt">使用100码豆</text>
					<text class="onlinepay-content-symd-warn">使用码豆可以抵扣并为商家投票哦～</text>
				</view>
			</view>
			<view class="onlinepay-btn">
				<button class="onlinepay-btn-wrap">¥303.56 码上结帐</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		mixins: [myMixin],
		components: {
			uniNavBar
		},
		data() {
			return {}
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			onClickGotoAddressPage() {
				uni.navigateTo({
					url: '../addressmanage/addressmanage'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style scoped>
	.onlinepay {
		width: 100%;
	}

	.onlinepay-bgbanner {
		width: 100%;
		height: 244rpx;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(180deg, rgba(240, 34, 48, 1) 0%, rgba(245, 245, 245, 1) 100%);
	}

	.onlinepay-content {
		width: 100%;
		height: 500px;
		position: absolute;
		left: 0;
		top: 0;
		box-sizing: border-box;
		padding-left: 16rpx;
		padding-right: 14rpx;
		padding-top: 54rpx;
	}

	.onlinepay-content-address {
		width: 100%;
		height: 232rpx;
		background-color: #fff;
		box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		box-sizing: border-box;
		padding-top: 26rpx;
		padding-right: 54rpx;
		padding-bottom: 36rpx;
		padding-left: 42rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 16rpx;
	}

	.onlinepay-content-address-content {
		display: flex;
		align-items: center;
	}

	.onlinepay-content-address-content-img {
		width: 20rpx;
		height: 28rpx;
		margin-right: 14rpx;
	}

	.onlinepay-content-address-content-txt {
		color: #6D7278;
		font-weight: 500;
		line-height: 48rpx;
		font-size: 28rpx;
	}

	.onlinepay-content-address-line {
		width: 100%;
		margin-top: 8rpx;
		height: 2rpx;
		background-color: #EEEEEE;
	}

	.onlinepay-content-address-add {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding-top: 26rpx;
		width: 100%;
	}

	.onlinepay-content-address-add-mark {
		width: 28rpx;
		height: 28rpx;
	}

	.onlinepay-content-address-add-txt {
		margin-top: 10rpx;
		font-size: 34rpx;
		line-height: 48rpx;
		color: #6D7278;
	}

	.onlinepay-content-list {
		width: 100%;
		background-color: #fff;
		border-radius: 12rpx;
		box-sizing: border-box;
		padding-top: 24rpx;
		padding-right: 20rpx;
		padding-bottom: 34rpx;
		padding-left: 58rpx;
		display: flex;
		flex-direction: column;
	}

	.onlinepay-content-list-name {
		display: flex;
		flex-direction: column;
	}

	.onlinepay-content-list-name-txt {
		font-size: 28rpx;
		color: #000000;
		font-weight: 500;
		line-height: 40rpx;
		margin-bottom: 8rpx;
	}

	.onlinepay-content-list-name-zk {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.onlinepay-content-list-name-zk-left {
		display: flex;
		align-items: center;
		margin-right: 44rpx;
	}

	.onlinepay-content-list-name-zk-left-txt {
		font-size: 24rpx;
		line-height: 34rpx;
		color: #E8541E;
		font-weight: 400;
		padding: 2rpx 4rpx 0 8rpx;
		border-radius: 2rpx;
		background: rgba(233, 90, 39, 0.1);
		margin-right: 10rpx;
	}

	.onlinepay-content-list-name-zk-left-content {
		color: #E8541E;
		font-size: 24rpx;
		line-height: 34rpx;
		font-weight: 400;
	}

	.onlinepay-content-list-name-zk-right {
		display: flex;
		align-items: center;
	}

	.onlinepay-content-list-name-zk-right-txt {
		font-size: 24rpx;
		line-height: 34rpx;
		color: #1E92E8;
		font-weight: 400;
		padding: 2rpx 4rpx 0 8rpx;
		border-radius: 2rpx;
		background: rgba(30, 146, 232, 0.1);
		margin-right: 10rpx;
	}

	.onlinepay-content-list-name-zk-right-content {
		color: #1E92E8;
		font-size: 24rpx;
		line-height: 34rpx;
		font-weight: 400;
	}

	.onlinepay-content-list-name-line {
		width: 100%;
		height: 4rpx;
		background-color: #EEEEEE;
	}

	.onlinepay-content-list-wrap {
		width: 100%;
		box-sizing: border-box;
		padding-top: 16rpx;
		padding-bottom: 18rpx;
		display: flex;
		flex-direction: column;
	}

	.onlinepay-content-list-wrap-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 16rpx;
	}

	.onlinepay-content-list-wrap-item:last-child {
		margin-bottom: 0;
	}

	.onlinepay-content-list-wrap-item-img {
		width: 124rpx;
		height: 104rpx;
		border-radius: 8rpx;
		margin-right: 28rpx;
	}

	.onlinepay-content-list-wrap-item-info {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 12rpx;
		flex: 1;
	}

	.onlinepay-content-list-wrap-item-info-name {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: #000000;
		margin-bottom: 8rpx;
	}

	.onlinepay-content-list-wrap-item-info-num {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: #000000;
	}

	.onlinepay-content-list-wrap-item-price {
		padding-top: 28rpx;
		display: flex;
		align-items: baseline;
	}

	.onlinepay-content-list-wrap-item-price-mark {
		font-size: 24rpx;
		color: #F02230;
		font-weight: 500;
	}

	.onlinepay-content-list-wrap-item-price-num {
		font-size: 30rpx;
		color: #F02230;
		font-weight: 500;
	}

	.onlinepay-content-list-line {
		width: 100%;
		height: 4rpx;
		box-sizing: border-box;
		padding-left: 12rpx;
	}

	.onlinepay-content-list-line-wrap {
		width: 100%;
		height: 100%;
		background-color: #eee;
	}

	.onlinepay-content-list-js {
		width: 100%;
		height: 96rpx;
		box-sizing: border-box;
		padding-left: 12rpx;
		padding-top: 16rpx;
	}

	.onlinepay-content-list-js-wrap {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.onlinepay-content-list-js-wrap-zk {
		font-size: 28rpx;
		color: #1E92E8;
		line-height: 40rpx;
		font-weight: 400;
	}

	.onlinepay-content-list-js-wrap-price {
		display: flex;
		align-items: center;
	}

	.onlinepay-content-list-js-wrap-price-left {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		margin-right: 50rpx;
	}

	.onlinepay-content-list-js-wrap-price-left-red {
		margin-left: 10rpx;
		color: #F02230;
	}

	.onlinepay-content-symd {
		width: 100%;
		margin-top: 16rpx;
		height: 94rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 74rpx;
	}

	.onlinepay-content-symd-select {
		width: 33rpx;
		height: 33rpx;
		border-radius: 50%;
		margin-right: 22rpx;
	}

	.onlinepay-content-symd-txt {
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.85);
		line-height: 36rpx;
		font-weight: 400;
	}

	.onlinepay-content-symd-warn {
		font-size: 20rpx;
		color: #999999;
		line-height: 28rpx;
		margin-right: 20rpx;
		margin-left: auto;
	}

	.onlinepay-btn {
		position: fixed;
		left: 0;
		bottom: 84rpx;
		height: 94rpx;
		width: 100%;
		box-sizing: border-box;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.onlinepay-btn-wrap {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
		background-color: #F02230;
		border-radius: 12rpx;
	}
</style>
